<template>
  <div>
    <ul>
      <!-- 数组 -->
      <li v-for="(item, index) in arr" :key="index">{{ item }} {{ index }}</li>
    </ul>
    <button @click="reverse">新添加</button>
  </div>
</template>

<script>
// 目标：了解v-for是如何更新真的的Dom
// 先构建旧的虚拟Do木结构  真实DOM结构  铺设到网页上
// v-for遍历的目标结构发生变化
// v-for构建新的徐宁DOM结构 和旧的虚拟DOM结构同级的对比===找到差异===再去更新真实DOM




export default {

  data () {
    return {
      arr: ['姐姐', '妹妹', '弟弟', '哥哥'],


    }
  },
  methods: {
    reverse () {
      this.arr.splice(1, 0, '新来的')

    },


  }
}
</script>

<style>
</style>
